<script setup>
import {defineProps, onMounted} from 'vue';
import {ref} from 'vue';
import { IotApi } from '../js/apis';
const deviceInfo = defineProps({
    readonly: String,
    id: String,
    name: String,
    type: String,
    key: String
})
const device_name=ref(deviceInfo.name);
const device_type=ref(deviceInfo.type);
const device_key = ref(deviceInfo.key);
const device_types = ref([]);
onMounted(()=>{
    IotApi.get_device_types().then(
        function fulfilled(values){
            console.log('fulfilled', values);
            for(var i=0; i<values.length; i++){
                var dt = values[i];
                console.log('dt:', dt);
                device_types.value.push({'value': dt.dtid, 'name': dt.name});
            }
            
        },
        function rejected(error){
            console.log('rejected', error);

        }
    ).catch(function onrejected(reason){
        console.log('onrejected', reason);
    });
})
</script>

<template>
    <div class="editor">
        <table>
            <tr class="tr">
                <td class="title-col">设备名称</td>
                <td class="input-col"><input type="text" name="device_name" v-model="device_name"></td>
            </tr>
            <tr>
                <td class="title-col">设备类型</td>
                <td class="input-col">
                    <select name="device_type" v-model="device_type">
                        <option v-for="dt in device_types" :key="dt.value" :value="dt.vlaue">{{dt.name}}</option>
                    </select>
                </td>
            </tr>
            
            <tr>
                <td class="title-col">激活码</td>
                <td class="input-col">
                    <input type="text" name="device_key" v-model="device_key">
                </td>
            </tr>
        </table>
    </div>
</template>

<style scoped>
.editor{
    display: flex;
    flex-direction: column;
}

table, tr, td{
    margin: 0.5rem;
    border-bottom: 1px solid lightgray;
    border-collapse: collapse;
}
.title-col{
    width: 5rem;
    height: 2   rem;
}
.input-col{
    padding-right: 0.5rem;
}
.input-col input, select{
    border: none;
    height: 1.5rem;
    padding: 0;
    width: 100%;
    margin-left: 0.5rem;
}
</style>